<template>
  <!-- 我的钱包 -->
  <el-row>
    <el-col :span="24" style="margin-top: 20px">
      <el-card
        class="card"
        style="margin-top: 20px; border-radius: 10px"
        body-style="padding-left:20px;padding-right:20px;padding-top:0;padding-bottom:0"
      >
        <el-row type="flex" justify="space-between" style="color: white">
          <div style="text-align: left; display: flex; align-items: center">
            <span style="font-size: 25px; font-weight: bold">钱包余额:</span>
            <span style="font-size: 50px; font-weight: bold; padding-left: 40px"
              >¥ {{ user_wallet_balance.toFixed(2) }}</span
            >
          </div>

          <div style="text-align: right; display: flex; align-items: center">
            <i
              class="iconfont icon-renminbi"
              style="
                font-size: 115px;
                font-weight: bold;
                color: rgba(255, 255, 255, 0.322);
                padding-right: 50px;
              "
            ></i>
            <el-button
              @click="gorecharge(recharge)"
              style="
                border-radius: 40px;
                color: white;
                background-color: Transparent;
                border-width: 3px;
                border-color: white;
                padding: 5px 20px;
              "
            >
              <el-row
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <i class="el-icon-coin" style="font-size: 40px"></i>
                <span style="font-size: 25px; padding: 0px 10px">充值</span>
              </el-row>
            </el-button>
          </div>
        </el-row>
      </el-card>

      <el-card
        class="card"
        style="margin-top: 20px; border-radius: 10px"
        body-style="padding-left:20px;padding-right:20px;padding-top:0;padding-bottom:0"
      >
        <div
          slot="header"
          class="clearfix"
          style="
            text-align: left;
            color: white;
            font-size: 25px;
            font-weight: bold;
          "
        >
          <span>充值记录</span>
        </div>
        <div style="padding: 20px 0px">
          <el-table
            :data="rechargeRecord"
            stripe
            height="200"
            cell-style="text-align:center;font-size:20px"
            header-cell-style="text-align:center;font-size:23px;height:50px"
            style="border-radius: 10px"
            :default-sort="{prop: 'operate_time', order: 'descending'}"
          >
            <el-table-column prop="id" label="订单序列号"></el-table-column>
            <el-table-column
              prop="record_amount"
              label="金额（元）"
            ></el-table-column>
            <el-table-column prop="operate_time" label="日期"></el-table-column>
          </el-table>
        </div>
      </el-card>

      <el-row>
        <el-col
          v-for="(item, index) in card"
          :key="index"
          span="auto"
          style="padding: 0px 20px; width: 50%"
        >
          <el-card
            class="card"
            style="margin-top: 20px; border-radius: 10px"
            body-style="padding:0px 20px"
          >
            <el-row type="flex" justify="space-between">
              <el-col span="16" style="color: white">
                <div
                  style="display: flex; align-items: center; padding: 20px 0px"
                >
                  <el-avatar
                    :class="item.card_icon"
                    :size="60"
                    style="
                      font-size: 45px;
                      color: #a80808;
                      background-color: #ffdede;
                      flex-shrink: 0;
                    "
                  ></el-avatar>
                  <div
                    style="text-align: left; padding-left: 20px; flex-shrink: 0"
                  >
                    <p style="margin: 0px; font-size: 25px; font-weight: bold">
                      {{ item.card_bank }}
                    </p>
                    <p style="margin: 0px; font-size: 20px; width: 100px">
                      {{ item.card_type }}
                    </p>
                  </div>
                </div>
                <div>
                  <p
                    style="
                      text-align: left;
                      padding: 20px;
                      margin: 0px;
                      font-size: 40px;
                      font-weight: bold;
                    "
                  >
                    {{ item.card_number }}
                  </p>
                </div>
              </el-col>
              <el-col
                span="8"
                style="color: #ffffff40; display: flex; align-items: flex-start"
              >
                <i :class="item.card_icon" style="font-size: 200px"></i>
              </el-col>
            </el-row>
          </el-card>
        </el-col>

        <el-col span="auto" style="padding: 0px 20px; width: 50%">
          <el-card
            class="card"
            style="
              margin-top: 20px;
              border-radius: 10px;

              height: 200px;
            "
            body-style="padding:0px 20px"
            
          >
            <el-row
              style="
                padding: 80px 0px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
              "
             
            >
              <i
                class="iconfont icon-jia"
                style="font-size: 50px; flex-shrink: 0"
                @click='addcard()'
              ></i>
              <span style="font-size: 40px; padding: 0px 10px; flex-shrink: 0"  @click='addcard()'>
                添加银行卡</span
              >
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { getAllCardAPI } from "@/api/getAllCardsAPI";
import { getuserAPI } from "@/api/getUserAPI";
import { getAllRechargeRecordsAPI } from"@/api/getAllRechargeRecordsAPI";

export default {
  data() {
    return {
      // 余额
      user_wallet_balance: 1000.05,
      // 充值记录
      rechargeRecord: [],
      // 银行卡列表
      card: [],
      recharge: { name: "我的钱包-充值", url: "recharge" },
    };
  },
  methods: {
    // 跳转到充值页面
    gorecharge(item) {
      this.$message.warning('该功能正在开发中，敬请期待！')
    },
// 跳转到添加银行卡页面
    addcard(){
       this.$message.warning('该功能正在开发中，敬请期待！')
    },

    async getcards() {
      const { data: res } = await getAllCardAPI(this.$route.query.user_id);
      // console.log("获取mock银行卡", res);
      if (res.flag) {
        var card = this.$jsonToObj(res);
        console.log(card);
        this.card = card;
        this.$message({
          message: "获取银行卡列表成功！",
          type: "success",
        });
      } else
        this.$message({
          message: "获取银行卡列表失败，请重试！",
          type: "error",
        });
    },
    //获取用户充值记录
    async getAllRechargeRecords() {
      console.log("发送getAllRechargeRecords请求");
      const { data: res } = await getAllRechargeRecordsAPI(this.$route.query.user_id);
      if (res.flag) {
        var list = this.$jsonToObj(res);
        for(var i=0;i<list.length;i++){
          list[i].id=list[i].pk
          list[i].operate_time=this.formatDate(list[i].operate_time)
        }
        console.log(list)
        this.rechargeRecord = list;
      }
    },

    async getBalance() {
      const { data: res } = await getuserAPI(this.$route.query.user_id);
      if (res.flag) {
        var list = this.$jsonToObj(res);
        var user = list[0];
        console.log(user);
        console.log("钱包余额", user.user_wallet_balance);
        this.user_wallet_balance = user.user_wallet_balance;
      }
    },

    formatDate(time){
      var date = new Date(time);
      var year = date.getFullYear(),
          month = date.getMonth()+1,//月份是从0开始的
          day = date.getDate(),
          hour = date.getHours(),
          min = date.getMinutes(),
          sec = date.getSeconds();
      var newTime = year + '-' +
                  (month < 10? '0' + month : month) + '-' +
                  (day < 10? '0' + day : day) + ' ' +
                  (hour < 10? '0' + hour : hour) + ':' +
                  (min < 10? '0' + min : min) + ':' +
                  (sec < 10? '0' + sec : sec);
  
      return newTime;         
    }


  },

  created(){
    this.getBalance();
    this.getcards();
    this.getAllRechargeRecords();
  },
};
</script>

<style scoped>
.card {
  background: -webkit-linear-gradient(bottom, #3600f921, #3600f974) no-repeat;
}
</style>
